<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	</head>

	<body>
		<div class="box">
			<div class="top">
				<h2></h2>
			</div>
			<div class="main">
				<div class="left">
					<ul class="list" id="list">
						<li class="active">
							<a href="#"><i class="iconfont icon-app"></i><span>列表1</span></a>
							<ul>
								<li>
									<a href="console.html" target="myFrame"><i class="iconfont icon-code"></i>控制台</a>
								</li>
								<li>
									<a href="box1.html" target="myFrame"><i class="iconfont icon-enclosure"></i>表单</a>
								</li>
								<li>
									<a href="box2.html" target="myFrame"><i class="iconfont icon-file"></i>新增信息</a>
								</li>
								<li>
									<a href="Echarts.html" target="myFrame"><i class="iconfont icon-copy"></i>数据分析</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#"><i class="iconfont icon-app"></i><span>列表1</span></a>
							<ul>
								<li>
									<a href="console.html" target="myFrame"><i class="iconfont icon-code"></i>控制台</a>
								</li>
								<li>
									<a href="box1.html" target="myFrame"><i class="iconfont icon-enclosure"></i>表单</a>
								</li>
								<li>
									<a href="box2.html" target="myFrame"><i class="iconfont icon-file"></i>新增信息</a>
								</li>
								<li>
									<a href="Echarts.html" target="myFrame"><i class="iconfont icon-copy"></i>数据分析</a>
								</li>
							</ul>
						</li>
						<li>
							<a href="#"><i class="iconfont icon-app"></i><span>列表1</span></a>
							<ul>
								<li>
									<a href="console.html" target="myFrame"><i class="iconfont icon-code"></i>控制台</a>
								</li>
								<li>
									<a href="box1.html" target="myFrame"><i class="iconfont icon-enclosure"></i>表单</a>
								</li>
								<li>
									<a href="box2.html" target="myFrame"><i class="iconfont icon-file"></i>新增信息</a>
								</li>
								<li>
									<a href="Echarts.html" target="myFrame"><i class="iconfont icon-copy"></i>数据分析</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>

				<div class="right">
					<iframe src="console.html" id="myFrame" name="myFrame" width="100%" height="100%"></iframe>
				</div>

			</div>

			<div class="bottom">
				<p>版权信息@</p>
			</div>
		</div>

		<script type="text/javascript">
			window.onload = function() {
				var btnList = $('#list>li');//获取所有最外层btn
				var selectBtn = -1; //父菜单当前选中第几个   -1表示当前没有任何选中
				var selectItem ; //当前选中父菜单下选中的子菜单项

				//绑定按钮点击事件
				for(var i = 0; i < btnList.length; i++) {
					
					btnList[i].i = i;
					
					btnList[i].onclick = function() {
						
						//清空所有子菜单选中状态
						selectItem = $('.left>ul>li>ul>li.active');
						$('.left>ul>li>ul>li').removeClass('active');
						selectItem.addClass('active');//为当前子菜单保留选中状态
						
						var selectNum = this.i;//当前点击了第几个父按钮
						
						//清空所有父子按钮选中
						btnList.removeClass('active');
						$('#list>li:not('+i+') li').removeClass('active');
						
						this.className = 'active';
						
						if(selectBtn != selectNum) {
							selectBtn = selectNum;
							$('#list>li>ul').slideUp('slow');
							$('#list>li>ul:eq(' + selectNum + ')').slideDown('slow');
						}

					}

				}
				
				$('.list>li li').on('click',function(){
					event.stopPropagation();
					$(this).siblings().removeClass('active');
					$(this).addClass('active');
				});

			}
		</script>
	</body>

</html>